<template>
	<view>
		<view class="card" v-for="(item,index) in list" :key="index" @click="change(item)">
			<view class="img">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/js.png" mode="" class="img-img"></image>
			</view>
			<view class="text">
				<view class="title">
					{{item.bank_name}}
				</view>
				<view class="num">
					{{item.bank_code}}
				</view>
			</view>
		</view>
		
		
		<view class="add" @click="Add">
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/Group%203538%402x.png" mode="" class="addimg"></image>
			<view class="addtitle">
				添加新的银行卡
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad(option) {
			this.$u.api.shop.getBankCard().then(res =>{
				if(res.code == 200){
					this.list = res.data
				}
			})
		},
		onShow() {
			this.$u.api.shop.getBankCard().then(res =>{
				if(res.code == 200){
					this.list = res.data
				}
			})
		},
		methods:{
			Add(){
				uni.navigateTo({
					url:'./card'
				})
			},
			change(item){
				let pages = getCurrentPages()
				let prevPage = pages[pages.length -2] 
				uni.navigateBack({
				        delta: 1,
						success() {
							prevPage.$vm.getValue(item) 
						}
				})
			}
		}
	}
</script>

<style>
	.card{
		width: 690rpx;
		height: 158rpx;
		background-color: white;
		margin-top: 20rpx;
		margin-left: 30rpx;
		display: flex;
		border-radius: 16rpx;
	}
	.add{
		width: 690rpx;
		height: 224rpx;
		background-color: white;
		margin-top: 20rpx;
		margin-left: 30rpx;
		border-radius: 16rpx;
		position: relative;
	}
	.addimg{
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		top: 42rpx;
		left: 310rpx;
	}
	.addtitle{
		width: 196rpx;
		font-size: 28rpx;
		color: #616161;
		font-family: PingFang SC-Medium;
		position: absolute;
		bottom: 44rpx;
		left: 248rpx;
	}
	.img{
		width: 170rpx;
		height: 100%;
		position: relative;
	}
	.img-img{
		width: 96rpx;
		height: 96rpx;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
	.text{
		width: 520rpx;
		height: 100%;
		position: relative;
		color: black;
		
		/* border: 1px red solid; */
	}
	.title{
		width: 100%;
		position: absolute;
		font-size: 32rpx;
		font-weight: bold;
		top: 44rpx;
	}
	.num{
		width: 100%;
		position: absolute;
		font-size: 28rpx;
		bottom: 36rpx;
	}
</style>